<template>
  <div >
      <div class="excel_table" v-if="excelData.length > 0">
        <el-table v-loading ="loading" :data="tableData" :header-cell-style="rowClass"
                  style="width: 100% ;text-align: center;"
                  height="700px"
                  size="mini">
          <el-table-column v-for='(item,i) in firstData' :key="i" :label="item" >
            <template slot-scope="scope">
              <el-input size="small" :disabled="disabled" v-model="scope.row[i]" />
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="excel_button" style="width: 50%; text-align: center"  v-if="configData.length > 0">
        <el-button  v-for="(item,index) in sheetNames"
                   :key="index"
                   :class="item"
                   @click="selected(index)">{{item}}
        </el-button>
      </div>
      <div class="ini_table"  v-if="confText.length > 0">
          <el-col>
            <textarea class="textarea-mine" v-model="confText" :disabled="disabled"  id="ini_table"></textarea>
          </el-col>
      </div>
</div>

</template>

<script>
export default {
  props: {
    disabled: Boolean,
    configId: '',
    contents: '',
    fileUrl: ''
  },
  data () {
    return {
      // 延迟加载
      loading: false,
      configData: [],
      excelData: [],
      tableData: [],
      firstData: [],
      sheetNames: [],
      lastSheetIndex: 0,
      confText: ''
    }
  },

  methods: {

    // 将上传input框点击事件改为按钮
    btnClick () {
      document.querySelector('.input-file').click()
    },
    selected (index) {
      // 上一个tableData保存到excelData
      this.excelData[this.lastSheetIndex] = this.tableData
      this.excelData[this.lastSheetIndex].unshift(this.firstData)
      this.tableData = []
      this.firstData = []
      let sheet = this.excelData[index]
      for (let i = 1; i < sheet.length; i++) {
        this.tableData.push(sheet[i])
      }
      // 第一行数据
      this.firstData = sheet[0]
      // 记录sheet引用
      this.lastSheetIndex = index
    },
    message () {
      // 数据初始化
      this.tableData = []
      this.firstData = []
      let configList = this.configData
      if (configList === null) {
        return
      }
      // 解析数据
      configList.forEach(config => {
        for (let k in config) {
          this.sheetNames.push(k)
          this.excelData.push(config[k])
        }
      })

      // 第一个sheet页数据
      let sheet = this.excelData[0] || []
      // 数据
      for (let i = 1; i < sheet.length; i++) {
        this.tableData.push(sheet[i])
      }
      // 数据首行
      this.firstData = sheet[0]
      // 初始化页记录
      this.lastSheetIndex = 0
    },
    rowClass ({rowIndex}) {
      return 'background:greenyellow'
    },
    async fileData () {
      // 处理配置文件数据
      let dataStr = this.contents
      let fileUrl = this.fileUrl
      var s = fileUrl.split('.')
      // 配置文件类型
      if (s[1] === 'xls') {
        this.configData = JSON.parse(dataStr)
      } else {
        this.confText = dataStr
      }
    },
    // 数据整合
    gatherData () {
      let fileUrl = this.fileUrl
      var s = fileUrl.split('.')
      // 配置文件类型
      if (s[1] === 'xls') {
        let sheetNames = this.sheetNames
        let excelData = this.excelData
        let configData = []
        // sheet记录对象
        // sheet记录数组
        for (let i = 0; i < sheetNames.length; i++) {
          let obj = Object.create(null)
          obj[sheetNames[i]] = excelData[i]
          let s = JSON.stringify(obj)
          configData.push(s)
        }
        this.configData = configData
        return '[' + configData.join(',') + ']'
      } else {
        return this.confText
      }
    }
  },
  created: async function () {
    this.loading = true
    await new Promise((resolve) => setTimeout(resolve, 500))
    await this.fileData()
    this.message()
    this.loading = false
  }
}
</script>

<style>
.excel_table{
  width: 100%;
  height: 700px;
  text-align: center;
  margin: auto;
}
.textarea-mine {
  height: 80vh;
  padding: 5px;
  width: 100%;
  display: block;
  flex: 1;
  margin: 10px 5px;
  font-size: 15px;
  color: #0c0c0c;
  overflow-y: auto;
  appearance: none;
  font-family: -apple-system-font, "Helvetica Neue", sans-serif, "Microsoft YaHei";
}
.ini_table{
  width: 80%;
  margin: auto;
  display:flex;
  align-items: center;
  text-align: center;
}
</style>
